// =============================================================================
// Grid
// =============================================================================

// Settings
// =============================================================================

// Create widths for each column.

@mixin column-generator() {
  @for $i from 1 through ($columns - 1) {
    &.with-#{$i}col {
      width: $one-column * $i;
    }
  }
}

// Create offsets for columns.

@mixin offset-generator() {
  @for $i from 1 through ($columns - 1) {
    &.with-#{$i}off {
      margin-left: $one-column * $i;
    }
  }
}

// Reset column width to 100%.
// Reset offsets to a margin-left of 0.

@mixin responsive-grid-generator() {
  @for $i from 1 through ($columns - 1) {
    &.with-#{$i}col {
      width: 100%;
    }
    &.with-#{$i}off {
      margin-left: 0;
    }
  }
}

// Component
// =============================================================================

.grid {
  display: block;
  padding: 0;
  margin: 0 $negative-gutter;
  font-size: 0;
  text-align: left;
}

// Descendants
// =============================================================================

// Creates a grid cell. Add `with-[x]col` to define the number of coloms the
// cell needs to span. Do not use 'with-[x]col` if you wish to span the entire
// width.

.grid-cell {
  @include column-generator();
  @include offset-generator();
  display: inline-block;
  width: 100%;
  padding: 0 $gutter;
  margin: 0;
  font-size: $base-font-size;
  text-align: left;
  vertical-align: top;
  &.is-centered {
    text-align: center;
  }
  &.is-right {
    text-align: right;
  }
  &.is-top {
    vertical-align: top;
  }
  &.is-middle {
    vertical-align: middle;
  }
  &.is-bottom {
    vertical-align: bottom;
  }
}

// Centers your grid container with a max-width.

.grid-centered {
  max-width: $max-width;
  margin-right: auto;
  margin-left: auto;
}

// Responsive
// =============================================================================

@include breakpoint(small) {
  .grid-cell {
    @include responsive-grid-generator();
  }
}
